import React from 'react'
import { info, CropImageUpload, success, error, FileUpload, Address, DateSelect, Modal, Select, Link, Input, TitleBar, Button } from '../../../ui-components'
import styleRoot from '../style'
import style from './style.fill'
import { connect } from 'react-redux'
import util from '../../../util'
import ReactDOM from 'react-dom'
import css from 'component-css'
import UserProfile from '../../personal/UserProfile'
import validate from '../../../libs/validate'
import cx from 'classnames'
import {TemplateMap,getFieldGroup}  from '../../../constants/fieldsMap'

export default  
@connect(({app, onboardingFlowsStaff, upload}) =>({onboardingFlowsStaff, upload, app}))
class extends React.Component {

	state = {
    password: '',
    showPassword: false
	}

  handleSave(changed) {
    const { userProfile } = this.props.onboardingFlowsStaff
    const { canInitPassword } = userProfile 

    const submit = () => {
      if (util.isNull(changed)) {
        return this.props.router.push('/onboarding/staff/read')
      } else {
        info('更新中..', true)
        this.props.saveOnboardingProfile(changed, () => {
          success('更新成功！')
          this.props.router.push('/onboarding/staff/read')
        })
      }
    }

    if (canInitPassword == 1) {
      const { password } = this.state
      if (!validate.call(this, ['password'])) {
        return error('请检查初始密码!')
      }
      this.props.initPassword(password, submit)
    } else {
      submit()
    }
  }

  componentDidMount() {
    this.props.fetchOnboardingProfile()
    this.props.fetchOnboardingCoreProfile()
  }

  componentWillUnmount() {
    this.props.resetOnboardingStaff()
  }

  filter(list) {
    return list.filter(v => v.referenceName !== 'essentialInfo')
  }

	render () {
    const { coreProfile, userProfile } = this.props.onboardingFlowsStaff
    const { profileFieldVOs:fields=[], canInitPassword } = userProfile;
		return (
			<div>
				<TitleBar
					label="个人信息"
				/>
				<div className={style.help}>补充以下信息，不仅方便办理入职手续，更能让大家了解你。</div>
				<div className={style.list}>
          { canInitPassword == 1 &&
            <div className={style['set-password']}>
              <div>
                <h2>系统帐号</h2>
                <div>
                  <Input 
                    label="登录名" 
                    disabled
                    value={coreProfile.emailAddress || ''}
                  />
                  <div className={style['init-password']}>
                    <Input 
                      ref="password"
                      name="password"
                      label="设置密码" 
                      type={this.state.showPassword? "text": "password"}
                      value={this.state.password} onChange={e => this.setState({ password: e.target.value })}/>
                    <Link icon="eye" className={cx({ [style['show-password']]: this.state.showPassword })} onClick={() => this.setState({ showPassword: !this.state.showPassword })}/>
                  </div>
                </div>
              </div>
            </div>
          }
          <UserProfile
            fields={getFieldGroup(TemplateMap, fields) || []}
            fetchAddresses={this.props.fetchAddresses}
            app={this.props.app}
            coreProfile={{...coreProfile,userEmploymentVO: userProfile.userEmploymentVO}}
            createDocument={this.props.createStaffDocument}
            downloadStaffDocument={this.props.downloadStaffDocument}
            downloadDocument={this.props.downloadTempDocument}
            fileUpload={this.props.fileUpload}
            updateAvatar={this.props.updateAvatar}
            onSave={::this.handleSave}
            profileType={'onboarding'}
            label="保存，进入下一步"
            help
          />
				</div>
			</div>
		)
	}
}
